<script lang="ts" setup>
import router from '@/router';
import { useStore } from '@/stores';
import { Search } from '@element-plus/icons-vue';
import { computed, onMounted, ref } from 'vue';
import UserDialog from './UserDialog.vue';

const props = defineProps<{ title: string; index?: boolean }>();
const emits = defineEmits<{ (e: 'search', v: string) }>();

const store = useStore();

const total = computed(() => {
  const { game, movie, teleplay } = store.userInfo;
  return (game ? game.size : 0) + (movie ? movie.size : 0) + (teleplay ? teleplay.size : 0);
});

const searchData = ref('');
const showDetail = ref(false);

const home = () => {
  router.push('/home');
};

const handleSearch = () => {
  emits('search', searchData.value);
};

onMounted(() => {
  document.title = props.title;
});
</script>

<template>
  <div class="categray-hearder">
    <div v-if="index" class="categray-title">{{ title }}</div>
    <div v-else class="categray-title" @click="home">
      <a-icon name="home" :size="24" />
      {{ title }}
    </div>
    <el-input
      v-if="!index"
      v-model="searchData"
      class="input-search"
      placeholder="输入关键字"
      @keydown.enter="handleSearch"
      @clear="handleSearch"
      clearable
    >
      <template #append>
        <el-button :icon="Search" @click="handleSearch" />
      </template>
    </el-input>
    <el-badge :value="total" :hidden="!total" :max="999" @click="showDetail = true">
      <a-icon :size="24" name="user" />
    </el-badge>
  </div>
  <UserDialog v-if="showDetail" @close="showDetail = false" />
</template>

<style lang="scss" scoped>
.categray-hearder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  box-shadow: var(--el-box-shadow-light);
  z-index: 1;
  .categray-title {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    .el-icon {
      padding-right: 8px;
    }
  }
  .input-search {
    width: calc(100vw - 200px);
  }
}
</style>
